import { FC, memo, ReactElement, useEffect } from "react";
import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

interface IProps {}

const Test: FC<IProps> = (): ReactElement => {
  useEffect(() => {
    //   const path = require("./1.fbx");
    // const path = require("../assets/2.fbx");

    // const camera = new THREE.PerspectiveCamera(
    //   70,
    //   window.innerWidth / window.innerHeight,
    //   0.1,
    //   1000
    // );
    const camera = new THREE.OrthographicCamera(-1, 1, -1, 1, 0.1, 100);
    // camera.position.set(8, 14, 30.0);
    // camera.lookAt(new THREE.Vector3());
    const scene = new THREE.Scene();
    scene.add(new THREE.AxesHelper(50));
    const light = new THREE.PointLight();
    light.position.set(0.8, 1.4, 1.0);
    scene.add(light);
    const ambientLight = new THREE.AmbientLight();
    scene.add(ambientLight);

    const path = require("../assets/3.obj");
    const mtlPath = require("../assets/3.mtl");
    console.log("path:", path);
    console.log("path:", mtlPath);

    // const loader = new FBXLoader();
    const loader = new OBJLoader();
    const MTLLoaderloader = new MTLLoader();
    MTLLoaderloader.load(mtlPath, mtl => {
      loader.setMaterials(mtl);

      loader.load(
        path,
        function (object: any) {
          console.log(object);
          //   object.position.y = -95;
          // object.children[0].geometry.computeBoundingBox();
          // object.children[0].geometry.center();
          object.children[0].scale.set(200, 200, 200);
          // object.position.y = 10;

          object.position.set(0, 0, 0);
          scene.add(object);
          const renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          scene.add(camera);
          const o = new OrbitControls(camera, renderer.domElement);
          o.update();

          document.body.appendChild(renderer.domElement);
          //   renderer.setAnimationLoop(animation);
          //   animation();
          function animation() {
            requestAnimationFrame(animation);

            object.rotation.x += 0.001;
            object.rotation.y += 0.001;
            object.rotation.z += 0.001;

            renderer.render(scene, camera);
          }
          renderer.render(scene, camera);
        },
        xhr => {
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        function (error) {
          console.error(error);
        }
      );
    });
  }, []);

  return <></>;
};

export default memo(Test);
